import Vue from 'vue'
import VueRouter from 'vue-router' //导入自己的Router路由 
Vue.use(VueRouter)//vue.use声明一下
/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 * 5 url 传递参数时to="/params/111/222" 
 *   读取参数时  {{$route.params.aaa}}
 *   {{JSON.stringify($route,null,2)}} <br>
 * 6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
 * 7 a链接上色==》 a.router-link-active
 */
let zyi=`
1 $route.params.id不是router {{$route.name}} <br>
2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
3 路由的时候要加s routes==!router(x错误)<br>
4 在写路由components的一定要写复数 加s <br>
5 url 传递参数时to="/params/111/222" 
  读取参数时  {{$route.params.aaa}}
  {{JSON.stringify($route,null,2)}} <br>
6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
7 a链接上色==》 a.router-link-active
`
const first={template:`<div>first内容</div>`}
 const router=new VueRouter({
        mode:'history',
        base:'__dirname',
        routes:[
            {path:'/'},
            {path:'/params/:aaa/:bbb'},
            {path:'/par/:id(\\d+)'}
        ]

 })

 new Vue({
     router,
     template:`
            <div>
                 <h6>${zyi}</h6>
                 <h1>xiao</h1> 
                 <h4>url 传递参数==》 {{$route.params.aaa}}-->{{$route.params.bbb}}</h4>
                 <ul>
                    <li>
                        <router-link to="/">/</router-link>
                    </li>
                    <li>
                        <router-link to="/params/111/222">/params/111/222</router-link>
                    </li>
                    <li>
                        <router-link to="/par/sss">par/sss</router-link>
                    </li>
                </ul>
                <p>show</p>
                <pre>
                   <code>
                     {{$route.params.aaa}}-->
                     {{$route.params.bbb}}
                     {{JSON.stringify($route,null,2)}}
                   </code>
                </pre>
            </div>
     `
 }).$mount('#app')